<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test used background images (scoped @keyframes)</title>
<style>blockquote::after { content: attr(style); }</style>
<style>
@keyframes local-upper-by-local-upper {
  from { background-image: url("internal1.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-local {
  from { background-image: url("internal2.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-upper {
  from { background-image: url("internal3.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-none {
  from { background-image: url("internal4.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes upper-by-local-upper {
  from { background-image: url("internal5.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes upper-by-local {
  from { background-image: url("internal6.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes upper-by-upper {
  from { background-image: url("internal7.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes upper-by-none {
  from { background-image: url("internal8.bmp"); }
  to { transform: translateX(40px); }
}
</style>
</head>
<body>
<blockquote style="animation: local-upper-by-local-upper 3s linear infinite;"></blockquote>
<blockquote style="animation: local-upper-by-upper 3s linear infinite;"></blockquote>
<blockquote style="animation: local-by-local-upper 3s linear infinite;"></blockquote>
<blockquote style="animation: local-by-upper 3s linear infinite;"></blockquote>
<blockquote style="animation: upper-by-local-upper 3s linear infinite;"></blockquote>
<blockquote style="animation: upper-by-upper 3s linear infinite;"></blockquote>
<blockquote>
<div id="shadow1">
<template shadowrootmode="open">
  <style>blockquote::after { content: attr(style); }</style>
  <style>
@keyframes local-upper-by-local-upper {
  from { background-image: url("shadow1.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-local {
  from { background-image: url("shadow2.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-upper {
  from { background-image: url("shadow3.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-upper-by-none {
  from { background-image: url("shadow4.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-by-local-upper {
  from { background-image: url("shadow5.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-by-local {
  from { background-image: url("shadow6.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-by-upper {
  from { background-image: url("shadow7.bmp"); }
  to { transform: translateX(40px); }
}

@keyframes local-by-none {
  from { background-image: url("shadow8.bmp"); }
  to { transform: translateX(40px); }
}
  </style>
  <blockquote style="animation: local-upper-by-local-upper 3s linear infinite;"></blockquote>
  <blockquote style="animation: local-upper-by-local 3s linear infinite;"></blockquote>
  <blockquote style="animation: local-by-local-upper 3s linear infinite;"></blockquote>
  <blockquote style="animation: local-by-local 3s linear infinite;"></blockquote>
  <blockquote style="animation: upper-by-local-upper 3s linear infinite;"></blockquote>
  <blockquote style="animation: upper-by-local 3s linear infinite;"></blockquote>
</template>
</div>
</blockquote>
</body>
<script src="../../common.js"></script>
<script>utils.loadShadowDoms();</script>
</html>
